<template>
  <div class="app-container">
    <!-- 种植计划表-管理按钮 -->
    <div class="search-bar">
      <el-input v-model="searchData.jhbh" placeholder="请输入计划编号查询" />
      <el-input v-model="searchData.jhmc" placeholder="请输入计划名称查询" />
      <el-select
        v-model="searchData.zzzw"
        placeholder="请选择种植作物查询"
      ></el-select>
      <el-select v-model="searchData.jhnd" placeholder="请选择计划年度查询">
        <el-option value="" label="全部"></el-option>
        <el-option
          v-for="item in yearList"
          :key="item"
          :value="item"
          :label="item"
        ></el-option>
      </el-select>
      <el-select v-model="searchData.state" placeholder="请选择状态查询">
        <el-option value="" label="全部"></el-option>
        <el-option value="1" label="启用中"></el-option>
        <el-option value="0" label="已停用"></el-option>
      </el-select>
      <el-button
        v-waves
        type="primary"
        size="small"
        icon="el-icon-search"
        @click="searchBtnHandle"
        >查询</el-button
      >
      <el-button
        v-waves
        type="info"
        size="small"
        icon="el-icon-refresh"
        @click="resetTableList"
        >显示全部</el-button
      >
      <div style="float: right">
        <el-button
          v-waves
          type="primary"
          icon="el-icon-plus"
          @click="openAdd"
          size="small"
          v-permission="'jtnc-zzjh-krZzjh-add'"
          >添加种植计划
        </el-button>
      </div>
    </div>
    <!-- 种植计划表-列表 -->
    <el-table
      ref="dataTable"
      :data="tableData"
      stripe
      border
      @selection-change="handleTableSelectChange"
      v-loading="isLoading"
    >
      <el-table-column
        type="selection"
        width="50"
        align="center"
        header-align="center"
      />
      <el-table-column label="计划编号" prop="jhbh" align="center" />
      <el-table-column label="计划名称" prop="jhmc" align="center" />
      <el-table-column label="所属地块" prop="dkmc" align="center" />
      <el-table-column label="种植作物" prop="zzzw" align="center" />
      <el-table-column label="种植株数" prop="zzzs" align="center" />
      <el-table-column label="农户" prop="nhxm" align="center" />
      <el-table-column label="技术员" prop="jsyxm" align="center" />
      <el-table-column label="合伙人" prop="hhrxm" align="center" />
      <el-table-column label="农场主" prop="nczxm" align="center" />
      <el-table-column label="生长周期" prop="szzqKs" align="center">
        <template v-slot="scope">
          {{ scope.row.szzqKs }}至{{ scope.row.szzqJs }}
        </template>
      </el-table-column>
      <el-table-column label="年度" prop="jhnd" align="center" />
      <el-table-column label="状态" prop="state" align="center">
        <template v-slot="scope">
          {{ scope.row.state == 1 ? "启用中" : "已停用" }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120" align="center">
        <template v-slot="scope">
          <el-button
            type="text"
            style="color: #13ce66"
            size="small"
            @click="enOrDisable(scope.row)"
            >{{ scope.row.state == 1 ? "停用" : "启用" }}</el-button
          >
          <el-button
            type="text"
            style="color: #13ce66"
            size="small"
            @click="openView(scope.row)"
            >详情</el-button
          >
          <el-button
            v-permission="'jtnc-zzjh-krZzjh-update'"
            type="text"
            size="small"
            @click="openUpdate(scope.row)"
            >修改
          </el-button>
          <el-button
            v-permission="'jtnc-zzjh-krZzjh-delete'"
            style="color: #ff6d6d"
            type="text"
            size="small"
            @click="deleteByIds(scope.row)"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 种植计划表-分页 -->
    <el-pagination
      style="text-align: center; margin-top: 10px"
      layout="total,prev,pager,next,sizes,jumper"
      :page-size="pager.limit"
      :current-page="pager.page"
      :total="pager.totalCount"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
    <!-- 添加修改弹窗 -->
    <el-dialog
      :title="titleMap[dialogType]"
      :close-on-click-modal="dialogType !== 'view' ? false : true"
      :visible.sync="dialogFormVisible"
      @close="resetTemp"
      width="600px"
      :key="'myDialog' + dialogIndex"
    >
      <el-form
        ref="dataForm"
        :model="temp"
        label-position="right"
        label-width="100px"
        :disabled="dialogType === 'view'"
      >
        <el-form-item
          label="计划编号"
          prop="jhbh"
          :rules="[]"
          v-if="dialogType != 'add'"
        >
          <el-input
            v-model="temp.jhbh"
            placeholder="请输入计划编号"
            :disabled="true"
          />
        </el-form-item>
        <el-form-item
          label="计划年度"
          prop="jhnd"
          :rules="[
            { required: true, message: '请选择计划年度', trigger: 'blur' },
          ]"
        >
          <el-date-picker
            v-model="temp.jhnd"
            type="year"
            value-format="yyyy"
            placeholder="选择年"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="计划名称"
          prop="jhmc"
          :rules="[
            { required: true, message: '请选择计划名称', trigger: 'blur' },
          ]"
        >
          <el-input v-model="temp.jhmc" placeholder="请输入计划名称" />
        </el-form-item>
        <el-form-item
          label="所属地块"
          prop="dkglId"
          :rules="[
            { required: true, message: '请选择所属地块', trigger: 'blur' },
          ]"
        >
          <el-select v-model="temp.dkglId" placeholder="请选择所属地块">
            <el-option
              @click.native="temp.dkmc = item.dkmc"
              v-for="item in dkList"
              :key="item.dkglId"
              :value="item.dkglId"
              :label="item.dkmc"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="种植作物"
          prop="zzzw"
          :rules="[
            { required: true, message: '请选择种植作物', trigger: 'blur' },
          ]"
        >
          <el-select v-model="temp.zzzw" placeholder="请选择种植作物">
            <el-option
              v-for="item in dict.dict.zzzw"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="种植株数"
          prop="zzzs"
          :rules="[
            { required: true, message: '请输入种植株数', trigger: 'blur' },
          ]"
        >
          <el-input v-model="temp.zzzs" placeholder="请输入种植株数">
            <template #append>株</template>
          </el-input>
        </el-form-item>

        <el-form-item
          label="农户姓名"
          prop="nhId"
          :rules="[{ required: true, message: '请选择农户', trigger: 'blur' }]"
        >
          <el-select v-model="temp.nhId" placeholder="请选择农户">
            <el-option
              @click.native="temp.nhxm = item.nhxm"
              v-for="item in nhList"
              :key="item.nhId"
              :value="item.nhId"
              :label="item.nhxm"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="技术员"
          prop="jsyId"
          :rules="[
            { required: true, message: '请选择技术员', trigger: 'blur' },
          ]"
        >
          <el-select v-model="temp.jsyId" placeholder="请选择技术员">
            <el-option
              @click.native="temp.jsyxm = item.jsyxm"
              v-for="item in jsyList"
              :key="item.jsyId"
              :value="item.jsyId"
              :label="item.jsyxm"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="合伙人" prop="hhrId" :rules="[]">
          <el-select v-model="temp.hhrId" placeholder="请选择合伙人">
            <el-option
              @click.native="temp.hhrxm = item.hhrxm"
              v-for="item in hhrList"
              :key="item.hhrId"
              :value="item.hhrId"
              :label="item.hhrxm"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="农场主" prop="nczId" :rules="[]">
          <el-select v-model="temp.nczId" placeholder="请选择农场主">
            <el-option
              @click.native="temp.nczxm = item.nczxm"
              v-for="item in nczList"
              :key="item.nczId"
              :value="item.nczId"
              :label="item.nczxm"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="生长周期"
          prop="szzqKs"
          :rules="[
            { required: true, message: '请选择生长周期', trigger: 'blur' },
          ]"
        >
          <TimeFrame :start.sync="temp.szzqKs" :end.sync="temp.szzqJs" />
        </el-form-item>
        <el-form-item
          label="农户每亩固定收益标准"
          prop="nhgdsybz"
          :rules="[
            {
              required: true,
              message: '请输入农户每亩固定收益标准',
              trigger: 'blur',
            },
          ]"
        >
          <el-input
            v-model="temp.nhgdsybz"
            placeholder="请输入农户每亩固定收益标准"
            type="number"
          >
            <template #append>元/亩</template>
          </el-input>
        </el-form-item>
        <el-form-item
          label="合伙人每亩固定收益标准"
          prop="hhrgdsybz"
          :rules="[
            {
              required: true,
              message: '请输入合伙人每亩固定收益标准',
              trigger: 'blur',
            },
          ]"
        >
          <el-input
            v-model="temp.hhrgdsybz"
            placeholder="请输入合伙人每亩固定收益标准"
            type="number"
          >
            <template #append>元/亩</template>
          </el-input>
        </el-form-item>
        <el-form-item
          label="农场主每亩固定收益标准"
          prop="nczgdsybz"
          :rules="[
            {
              required: true,
              message: '请输入农场主每亩固定收益标准',
              trigger: 'blur',
            },
          ]"
        >
          <el-input
            v-model="temp.nczgdsybz"
            placeholder="请输入农场主每亩固定收益标准"
            type="number"
          >
            <template #append>元/亩</template>
          </el-input>
        </el-form-item>
        <el-form-item
          label="保底亩产值"
          prop="bzmcz"
          :rules="[
            { required: true, message: '请输入保底亩产值', trigger: 'blur' },
          ]"
        >
          <el-input
            v-model="temp.bzmcz"
            placeholder="请输入保底亩产值"
            type="number"
          >
            <template #append>元/亩</template>
          </el-input>
        </el-form-item>
        <el-form-item
          label="合伙人超额分红比例"
          prop="hhrcefhbl"
          :rules="[
            {
              required: true,
              message: '请输入合伙人超额分红比例',
              trigger: 'blur',
            },
          ]"
        >
          <el-input
            v-model="temp.hhrcefhbl"
            placeholder="请输入合伙人超额分红比例"
            type="number"
          >
            <template #append>%</template>
          </el-input>
        </el-form-item>
        <el-form-item
          label="农场主超额分红比例"
          prop="nczcefhbl"
          :rules="[
            {
              required: true,
              message: '请输入农场主超额分红比例',
              trigger: 'blur',
            },
          ]"
        >
          <el-input
            v-model="temp.nczcefhbl"
            placeholder="请输入农场主超额分红比例"
            type="number"
          >
            <template #append>%</template>
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          v-waves
          type="primary"
          v-if="dialogType !== 'view'"
          @click="saveData"
          >保存</el-button
        >
        <el-button v-waves @click="dialogFormVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import waves from "@/directive/waves";
import crudMixin from "@/mixin/crudMixin";
import TimeFrame from "@/components/TimeFrame/index.vue";
import request from "@/utils/request";
export default {
  directives: { waves },
  mixins: [crudMixin],
  dicts: ["zzzw"],
  components: { TimeFrame },
  data() {
    return {
      url: {
        list: "/jtnc/zzjh/krZzjh/list",
        add: "/jtnc/zzjh/krZzjh/add",
        info: "/jtnc/zzjh/krZzjh/getById",
        update: "/jtnc/zzjh/krZzjh/update",
        delete: "/jtnc/zzjh/krZzjh/delete",
        nh: "/jtnc/nhdagl/krNhdagl/select",
        hhr: "/jtnc/hhrdagl/krHhrdagl/select",
        jsy: "/jtnc/jsydagl/krJsydagl/select",
        ncz: "/jtnc/nczdagl/krNczdagl/select",
        dk: "/jtnc/dkgl/krDkgl/select",
        enable: "/jtnc/zzjh/krZzjh/enable",
        disable: "/jtnc/zzjh/krZzjh/disable",
      },
      dkList: [],
      nhList: [],
      hhrList: [],
      nczList: [],
      jsyList: [],
      yearList: [],
      needGetParam: true,
      idName: "zzjhId",
    };
  },
  created() {
    this.loadTableList();
    this.resetTemp();
  },
  methods: {
    getSelectList(url, name) {
      request({
        url: url,
        method: "get",
      }).then((res) => {
        if (res.code == 200) {
          this[name] = res.data;
        }
      });
    },
    // 获取下拉数据
    getSelectData() {
      this.getSelectList(this.url.dk, "dkList");
      this.getSelectList(this.url.nh, "nhList");
      this.getSelectList(this.url.hhr, "hhrList");
      this.getSelectList(this.url.jsy, "jsyList");
      this.getSelectList(this.url.ncz, "nczList");
      this.getYearList();
    },
    // 获取最近5年
    getYearList() {
      let year = new Date().getFullYear();
      this.yearList = [];
      for (let i = 0; i < 5; i++) {
        this.yearList.push(year - i);
      }
    },
    enOrDisable(row) {
      request({
        url: row.state == 1 ? this.url.disable : this.url.enable,
        method: "get",
        params: {
          zzjhId: row.zzjhId,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.$message.success(row.state == 1 ? "停用成功" : "启用成功");
          this.loadTableList();
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.search-bar {
  margin-bottom: 10px;
  ::v-deep {
    .el-input,
    .el-select {
      width: 180px;
      margin-right: 10px;
      margin-bottom: 5px;
    }
  }
}
</style>
